<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>table</title>
    <link rel="stylesheet" href="./jquery-easyui-1.5.5.2/themes/bootstrap/easyui.css">
    <link rel="stylesheet" href="./jquery-easyui-1.5.5.2/themes/icon.css">
    <link rel="stylesheet" href='./new.css' </head>

    <body>
        <!--Layout 布局-->
        <div id="cc" class="easyui-layout" style="width:100%;height:1000px;">
            <div data-options="region:'north',title:'头部',split:true" style="height:200px;">
                <div class="wrapper">
                    <section class="sec01"></section>
                    <section class="sec02"></section>
                    <section class="sec03"></section>
                </div>
                <div class="alternative">Pure CSS Hover</div>
            </div>
            <div data-options="region:'east',title:'添加自动播放标签页（Tabs）',split:true" style="width:50%;">
                <!--添加自动播放标签页（Tabs）-->
                <div id="tt2" class="easyui-tabs" style="width:100%;height:80%;">
                    <div title="星空1" style="padding:20px;">
                        <img src="./images/1.jpg">
                    </div>
                    <div title="星空2" style="padding:20px;">
                        <img src="./images/2.jpg">
                    </div>
                    <div title="星空3" style="padding:20px;">
                        <img src="./images/3.jpg">
                    </div>
                    <div title="星空4" style="padding:20px;">
                        <img src="./images/4.jpg">
                    </div>
                    <div title="星空5" style="padding:20px;">
                        <img src="./images/5.jpg">
                    </div>
                </div>
                <!--翻页-->
                <div class="easyui-panel">
                    <div class="easyui-pagination" data-options="total:40"></div>
                </div>
            </div>
            <div data-options="region:'west',title:'Calendar 日历',split:true" style="width:50%;">
                <!--Propertygrid 属性网格-->
                <div id="date" style="width:100%;height:400px;"></div>
            </div>
            <div data-options="region:'center',title:'Propertygrid 属性网格'" style="padding:5px;background:#eee;">
                <div id="tt" class="easyui-tabs" style="width:90%;height:270px;">

                </div>
            </div>
        </div>
        <div data-options="region:'south',title:'底部',split:true" style="height:200px;">
            <!--进度条-->
            <p id='one'>点击,进度条开始变化</p>
            <div id='second' style="margin:20px 0;">
                <a href="javascript:void(0);" class="easyui-linkbutton" onclick="start()">Start</a>
            </div>
            <div id="p" class="easyui-progressbar" style="width:100%;"></div>
        </div>

        <script src='./jquery-3.3.1.min.js'></script>
        <script src='./jquery-easyui-1.5.5.2/jquery.easyui.min.js'></script>
        <script>
            // Layout 布局  全局
            $('#cc').layout();
            // Propertygrid 属性网格   center
            var rows = [
                { "name": "Name", "value": "Bill Smith", "group": "ID Settings", "editor": "text" },
                { "name": "Address", "value": "", "group": "ID Settings", "editor": "text" },
                { "name": "Age", "value": "40", "group": "ID Settings", "editor": "numberbox" },
                { "name": "Birthday", "value": "01/02/2012", "group": "ID Settings", "editor": "datebox" },
                { "name": "SSN", "value": "123-456-7890", "group": "ID Settings", "editor": "text" },
                { "name": "Age", "value": "40", "group": "ID Settings", "editor": "numberbox" },
                { "name": "Birthday", "value": "01/02/2012", "group": "ID Settings", "editor": "datebox" },
                { "name": "SSN", "value": "123-456-7890", "group": "ID Settings", "editor": "text" },
                {
                    "name": "Email", "value": "bill@gmail.com", "group": "Marketing Settings", "editor": {
                        "type": "validatebox",
                        "options": {
                            "validType": "email"
                        }
                    }
                },
                {
                    "name": "FrequentBuyer", "value": "false", "group": "Marketing Settings", "editor": {
                        "type": "checkbox",
                        "options": {
                            "on": true,
                            "off": false
                        }
                    }
                },
                {
                    "name": "Email", "value": "bill@gmail.com", "group": "Marketing Settings", "editor": {
                        "type": "validatebox",
                        "options": {
                            "validType": "email"
                        }
                    }
                },
                {
                    "name": "FrequentBuyer", "value": "false", "group": "Marketing Settings", "editor": {
                        "type": "checkbox",
                        "options": {
                            "on": true,
                            "off": false
                        }
                    }
                }

            ]
            $('#tt').propertygrid({
                width: '100%',
                height: 'auto',
                showGroup: true,
                scrollbarSize: 0,
                columns: [[
                    { field: 'name', title: 'Name', width: 300, resizable: true },
                    { field: 'value', title: 'Value', width: 300, resizable: true }
                ]]
            });
            $('#tt').propertygrid('loadData', rows);
            $('.datagrid-group-title').css({
                'padding-left': 8
            })
            // Calendar 日历     left
            $('#date').calendar({
                fit: true,
                current: new Date()
            });
            // 添加自动播放标签页（Tabs）
            // EasyUI 创建进度条
            function start() {
                var value = $('#p').progressbar('getValue');
                if (value < 100) {
                    value += Math.floor(Math.random() * 10);
                    $('#p').progressbar('setValue', value);
                    setTimeout(arguments.callee, 4000);
                }
            };
        </script>
    </body>

</html>